<template>
	<view>
		<u-navbar class="navbar" :border-bottom="false" title="线下支付" :title-size="36" :title-bold="true" :title-color="textColor">
			<!-- <view slot="right" style="margin-right: 35rpx;">
				<ak-dropdown :list="list" />
			</view> -->
		</u-navbar>
		<view class="container">
			<!--  -->
			<text class="u-font-28 grey-color">请您将款项支付到以下账户</text>
			<!--  -->
			<view class="u-m-t-22">
				<image src="/static/order/yanzheng_small.png" style="width: 30rpx;height: 30rpx;vertical-align:middle;" mode=""></image>
				<text class="u-font-26 badge-color u-m-l-10" style="vertical-align:middle;">汇款时请备注企业名及订单号</text>
			</view>
			<!--  -->
			<view style="margin-top: 60rpx;display: flex;line-height: 56rpx;">
				<view class="u-flex-col">
					<text class="u-font-28" style="color: #666666;">汇款金额</text>
					<text class="u-font-28" style="color: #666666;">收款账号</text>
					<text class="u-font-28" style="color: #666666;">账户名称</text>
					<text class="u-font-28" style="color: #666666;">开户银行</text>
					<text class="u-font-28" style="color: #666666;">支付单号</text>
				</view>
				<view class="u-flex-col u-m-l-30">
					<text class="u-font-34">￥{{ info.actualAmount }}</text>
					<text class="u-font-34">{{ info.accountNumber }}</text>
					<text class="u-font-30">{{ info.accountName||'空' }}</text>
					<text class="u-font-30">{{ info.bankOfDeposit }}</text>
					<text class="u-font-30">{{ info.paymentNo }}</text>
				</view>
			</view>
			<!--  -->
			<view class="u-m-t-60">
				<image src="/static/order/yanzheng_small.png" style="width: 30rpx;height: 30rpx;vertical-align:middle;" mode=""></image>
				<text class="u-font-26 badge-color u-m-l-10" style="vertical-align:middle;">汇款结束请上传付款凭证（最多6张）</text>
			</view>
			<view class="u-m-t-30">
				<u-upload :action="baseUrl + 'api/Resource/UploadToOss'"
					:file-list="fileList"
					:header="headerToken" 
					 max-count="6"
					 :source-type="['album']"
					 @on-success="onSuccess"
					 @on-remove="onRemove"
					 ></u-upload>
			</view>
			<!--  -->
			<!-- <view class="u-m-t-40">
				<text>联系电话</text>
				<text class="u-font-34 u-m-l-30">{{ info.telNo }}</text>
			</view> -->
		</view>
		<!-- 按钮 -->
		<view class="bottom-button">
			<!-- <u-button hover-class="none" shape="circle" :ripple="true" :hair-line="false" :custom-style="getBtStyle('plain',-1, 90)" style="width: 100%;" @click="showPay">其他方式付款</u-button> -->
			<u-button  hover-class="none" shape="circle" :ripple="true" :hair-line="false" :custom-style="getBtStyle('plain',-1, 90)" style="width: 100%;" @click="back">暂不支付</u-button>
			<u-button  hover-class="none" shape="circle" :hair-line="false" :custom-style="getBtStyle('default', -1, 90)" style="width: 100%;margin-left: 20rpx;" @click="toOrder">完成支付</u-button>
			
		</view>
		<!-- 支付方式 -->
		<u-action-sheet :list="payList" v-model="payTypeShow" @click="choosePayment"></u-action-sheet>
	</view>
</template>

<script>
	// import Dropdown from '@/components/dt-dropdown/dt-dropdown.vue'
	import AkDropdown from '@/components/ak-dropdown/index.vue'
	import indexConfig from '@/config/index.config';
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		components: { AkDropdown },
		data() {
			return {
				id: null,
				action:indexConfig.baseUrl+'/api/Resource/Upload',
				fileList:[],
				payTypeShow: false,
				type: 4,
				
				resourceList:[],
				payList: [
					{
						text: '微信'
					},
					{
						text: '支付宝'
					},
					{
						text: '银行对公'
					}
				],
				info: {},
				list: [
					{
						label: '复制内容',
						image: '/static/order/baocuntupian.png'
					},
					{
						label: '保存图片',
						image: '/static/order/baocuntupian.png'
					},
					{
						label: '分享好友',
						image: '/static/order/fenxianghaoyou.png'
					}
				]
			}
		},
		onLoad(options) {
			// this.id = options.id
			// if (options.type) {
			// 	this.type = options.type
			// }
			if(options){
				this.info = JSON.parse(options.offlineSet)
			}
			// this.getOffline()
		},
		computed:{
			...mapState(useUserStore, ['headerToken'])
		},
		methods: {
			back(){
			uni.navigateBack();	
			},
			async getOffline() {
				// type 4 月结支付 3 线下付款
				const res = await this.$http.get('api/Trade/OfflinePayment', { params: { id: this.id, type: this.type } })
				this.info = res
			},
			
			onSuccess(data) {
				uni.hideLoading()
				this.resourceList.push(data.data[0].id);
			},
			onRemove(data) {
				this.resourceList.splice(data,1)
			},
			showPay() {
				return this.$u.toast('暂无其他支付方式')
				payTypeShow = true
			},
			choosePayment(index) {
				console.log(index)
			},
			async toOrder() {
				uni.showLoading({
					title:'loading..'
				})
				if(this.resourceList.length===0){
					uni.hideLoading({
						title:'loading..'
					});
					this.$u.toast('支付凭证不得为空');
					return false;
				}
				
				let res = await this.$newHttp.post('api/TradePayment/Pay', {
					id: this.info.id,
					paymentMethod: this.info.paymentMethod,
					resourceIds:this.resourceList
				});
				uni.hideLoading({
					title:'loading..'
				})
				if(res.code === 200){
					this.$mRouter.redirectTo({ route: '/pages/purchase/payorder/details?id='+this.info.id })
				}else{
					this.$u.toast('线下支付失败，错误信息：'+res.erroMessage);
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 30rpx 35rpx;
	}
	.bottom-button {
		padding: 0 35rpx;
		position: fixed;
		width:100%;
		bottom: 100rpx;
		// margin: 0;
		display: flex;
		// justify-content: space-between;
	}
</style>
